<template>
    <div class="comment">
        <div class="comment_title">
            <span><i class="glyphicon glyphicon-triangle-right"> </i>  评价订单</span>
        </div>
        <hr>
        <div class="goodsList" v-for="data in goodsItem" v-if="data.historyGoods">
            <div class="goodsLeft">
                <img :src="data.historyGoods.thumb.url" alt="">
            </div>
            <div class="goodsRight">
                <div class="goodsName">{{data.historyGoods.name}}</div>
                <div class="goodsInfo">
                    <p>价格和数量<span>1*￥{{data.historyGoods.price}}</span></p>
                    <p>主体及配件<span>{{data.historyGoods.brief}}</span></p>
                    <p>订单状态<span>已收货</span></p>
                </div>
            </div>
            <hr style="clear: both;">
        </div>
        <div class="commentUser">
            <div class="userInfo" v-if="user.user">
                <img :src="user.user.portrait.url" alt="">
                <span>{{user.user.nickname}}</span>
            </div>
            <div class="commentInfo">
                <div v-for="data in goodsItem" v-if="data.commentBlock">
                    <p v-for="(item,index) in data.commentBlock.commentTplItems">{{item.name}}<star-modal v-model="star[item.id]"></star-modal></p>
                </div>
                <!--<p v-for="(item,index) in orderItems">{{item.name}}<star-modal v-model="star[item.id]"></star-modal></p>-->
                <p>总体评价<star-modal v-model="goodsStar"></star-modal></p>
                <textarea v-model="goodsContent" cols="" rows="5" :placeholder="guideText"></textarea>
            </div>
            <div class="upImg">
                <!--<img src="../images/2-06.jpg" align="TextTop" alt="">-->
                <!--<img src="../images/3-01.jpg" align="TextTop" alt="">-->
                <img :src="file.url" align="TextTop" alt="" v-for="(file,index) in files" @click="lookBigPic(file,index)">
                <div class="addImg" @click="addPic" v-if="files.length<4">
                    <span>
                        <i class="glyphicon glyphicon-camera"></i>
                    </span>
                    <p>添加照片</p>
                    (最多4张)
                </div>
            </div>
            <button class="btn btn-primary" @click="submin">提交评论</button>
        </div>
        <div class="mask" @click="hidBigPic">
            <div class="mask-img">
                <img  alt="">
            </div>
            <div class="del-img" @click="delImg"><i class="glyphicon glyphicon-trash"></i></div>
        </div>
    </div>
</template>
<script>
require('./comment.css');
var starModal=require('./lib/starModal.vue');
var Uploader=require('./lib/Uploader');
var uploader;
module.exports={
    components:{
        starModal:starModal,
    },
    data:function () {
        var files = [];
        uploader = new Uploader(files);
        return {
            id:'',
            goodsStar:0,
            goodsContent:'',
            star:{},
            user:{},
            files:files,
            goodsItem:[],
            orderItems:[],
            guideText:'',
        }
    },
    methods:{
        addPic: function() {
            uploader.chooseFile();
        },
        lookBigPic:function (data,index) {
            $('.mask-img img').attr('src',data.url);
            $('body').attr('class','modal-open');
            $('.mask-img').attr('id',index);
            $('.mask').fadeToggle(300);
        },
        hidBigPic:function () {
            $('body').removeClass('modal-open');
            $('.mask').fadeToggle(300);
        },
        delImg:function () {
            var id= $('.mask-img').attr('id');
            this.files.splice(id,1);
        },
        submin:function () {
            var _self=this;
            for( i in this.star){
                if(this.star[i]==''||this.star[i]==0){
                    alert('请完成评论');
                    return
                }
            }
            var imgs=[];
            for(var i=0;i<this.files.length;i++){
                imgs.push(this.files[i].id);
            }
            var orderComment={
                star:'',
                content:'',
                tplStar:{},
                img_ds:[],
            };
            var goodsComments=[{
                star:this.goodsStar,
                content:this.goodsContent,
                tplStar:this.star,
                img_ds:imgs,
                order_goods_id:this.goodsItem.length>0?this.goodsItem[0].orderGoodsId:''
            }];
            JxSdk.comment.commentSilent(this.id, orderComment, goodsComments).then(function (data) {
//                alert('评价成功');
                _self.$router.push('/order');
            }).catch(function (message) {
                alert(message)
            });
        }
    },
    mounted:function () {
        var str=location.href;
        var url=str.split('=');
        var _self = this;
        this.id=url[1];
        if(url[1]){
            JxSdk.comment.commentItem(url[1]).then(function (data) {
                _self.goodsItem=data.goodsItems;
                _self.orderItems=data.orderItems;
                _self.guideText=data.guideText;
                JxSdk.user.silentInfo().then(function (data) {
                    _self.user=data;
                });
                for(var j=0;j<data.goodsItems.length;j++){
                    if(data.goodsItems[j].commentBlock){
                        for(var k=0;k<data.goodsItems[j].commentBlock.commentTplItems.length;k++){
                            Vue.set(_self.star,data.goodsItems[j].commentBlock.commentTplItems[k].id,0)
                        }
                    }
                };
//                for(var i=0;i<_self.orderItems.length;i++){
//                    Vue.set(_self.star,_self.orderItems[i].id,0)
//                }
            });
        }
    }
}
</script>